<template>
<div class="shop">
    <div class="shop-list">
        <router-link class="shop-item" v-for="item in list" :key="item.id" :to="'/home/shopinfo/'+item.id" tag="div">
            <img :src="item.img" alt="">
            <h1> {{item.title}}</h1>
            <div class="info">
                <p class="price">
                    <span class="now">{{item.now}}</span>
                    <span class="old">{{item.old}}</span>
                </p>
                <p class="sell">
                  <span>热卖中</span>
                  <span>剩{{item.num}}只</span>
                </p>
            </div>
        </router-link>
 
        
    </div>
    <mt-button type="danger" size="large">加载更多</mt-button>
</div>
</template>
<script>
export default {
    data(){
        return{
            list:[]
        }
    },
    created(){
      this.getlist()
    },
    methods:{
        getlist(){
           this.$http.get("http://localhost:3030/shop").then(result =>{
               console.log(result.body)
              if(result.body.status==0){
                var shop=result.body.message
                this.list=shop
              }else{
                
              }
           })
        }
    }
}
</script>
<style scoped>
.shop{
    padding-top: 50px;
    padding-bottom:50px; 
}
.shop-list{
    display:flex;
    flex-wrap: wrap;
    padding: 5px;
    justify-content:space-between;
}
.shop-item{
    width: 49%;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 1px 1px #ccc;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height:293px; 
}
h1{
    font-size: 14px;
}
img{
    width: 100%;
}
.info{
    background-color: #eee;
    margin: 0;
    padding: 3px;
}

.now{
    color: red;
    font-weight:700;
    font-size: 16px
}
.old{
    text-decoration: line-through;
    font-size: 12px;
    margin-left: 10px;
}
.sell{
    display: flex;
    justify-content:space-between;
}

</style>

